<template>

	<z-paging ref="paging" v-model="indexList" @query="queryList" bg-color='#F7F9FA'>
    <view>
      <uni-segmented-control :current="current" :values="items" style-type="button" active-color="#2b4af7" @clickItem="onClickItem" />
<!--      <view class="uni-padding-wrap uni-common-mt">-->
<!--        <uni-segmented-control :current="current" :values="items" style-type="text" active-color="#007aff" @clickItem="onClickItem" />-->
<!--      </view>-->
    </view>
		<view class="content">
			<view class="sousuo">
				<u--input placeholder="请输入小区名字" suffixIcon="search" confirm-type="search"
					suffixIconStyle="color: #909399" @change="change"></u--input>
			</view>
			<view class=" tablenav">
				<view class="span" @click="openfw(1)">
					重庆市区<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
				</view>
				<view class="span" @click="openfw(2)">
					面积<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
				</view>
				<view class="span" @click="openfw(3)">
					价格<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
				</view>
				<view class="span" @click="openfw(4)">
					更多<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
				</view>
				<!-- <view class="span">
				排序<u-icon name="arrow-down" color="#4473c5" size="10"></u-icon>
			</view> -->
			</view>
			<view class="fqlist">
				<view class="ul">
					<view class="li" v-for="(item,index) in indexList" :key="index" @click="tofwtail(item.id)">
						<view class="tpic">
							<image v-if='item.backgroundPic' :src="item.backgroundPic"></image>
							<image v-if='!item.backgroundPic' :src="item.coverPicList[0]"></image>
							<view class="title">{{item.cellName}}</view>
						</view>
						<view class="text">
							<view class="dt">
								<text class="sb">{{item.auctionNumber}}</text>
								{{item.title}}
							</view>
							<view class="mj">{{item.area}}m²</view>
							<view class="zk" v-if="item.discount">{{item.discount}}</view>
							<view class="span">
								起拍价 <view class="jg">{{item.startingPrice}}万</view>
								市场价 <view class="str">{{item.marketPrice}}万</view>
							</view>
							<view class="qp_p">
								<view class="p">
									起拍时间 {{getTime(item.auctionTime)}}
								</view>
								<view class="p">
									{{pmztlist[item.auctionState].label}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<u-popup :show="fwshow" @close="close" @open="open" mode="top">
				<view>
					<view class=" tablenav">
						<view class="span" @click="fytc(1)">
							区域<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
						</view>
						<view class="span" @click="fytc(2)">
							面积<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
						</view>
						<view class="span" @click="fytc(3)">
							价格<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
						</view>
						<view class="span" @click="fytc(4)">
							更多<u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
						</view>
						<!-- 	<view class="span">
						排序<u-icon name="arrow-down" color="#4473c5" size="10"></u-icon>
					</view> -->
					</view>
					<view class="ul qy" v-if="fwtype == 1">
						<view :class="'item ' + [quyu == ''?'on':'']"
							@click="clickqy('')">
							不限
						</view>
						<view :class="'item ' + [quyu == item?'on':'']" v-for="(item,index) in quyulist" :key="index"
							@click="clickqy(item)">
							{{item}}
						</view>


					</view>

					<view class="mianji ul" v-if="fwtype == 2">
						<view  v-for="(item,index) in mjlist" :key="index" :class="'span ' + [mianji == item.value?'on':'']"
							@click="clickmj(item.value)">
							{{item.label}}
						</view>

					</view>
					<view class="ul jiage" v-if="fwtype == 3">
						<view  v-for="(item,index) in jglist" :key="index"  :class="'span ' + [jiage == item.value?'on':'']"
							@click="clickjg(item.value)">
							{{item.label}}
						</view>

					</view>
					<view class="ul gengduo" v-if="fwtype == 4">
						<view class="dt">
							拍卖方式
						</view>
						<view class="p">
							<view  v-for="(item,index) in pmfslist"
						 :class="'span ' + [pmfs == item.value?'on':'']"		:key="index" @click="clickfs(item.value)">
								{{item.label}}
							</view>

						</view>
						<view class="dt">
							拍卖状态
						</view>
						<view class="p">
							<view  v-for="(item,index) in pmztlist"  :class="'span ' + [pmzt == item.value?'on':'']"
								:key="index" @click="clickzt(item.value)">
								{{item.label}}
							</view>

						</view>
					</view>
				</view>
				<view class="bot03">
					<view class="fl">
						<view class="ff1">
							<view class="">


								<u-icon name="reload" color="#666" size="14" left="10"></u-icon>
							</view>
							<view class="" @click="chonzhi">
								重置
							</view>
						</view>

					</view>
					<view class="fr">
						<u-button  @click="close" type="primary" text="确定"></u-button>
					</view>
				</view>
			</u-popup>
			<tabbar :current="1" :tabBarList="tabBerLists"></tabbar>
		</view>
	</z-paging>
</template>

<script>
	import {
		housingresourcepage,
		housingresource
	} from "../../api/index.js"
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		data() {
			return {
        items: ['住宅', '商业'],
        current: 0,
        housingType: 1,
        agentMobile:'',
				indexList: [],
				fwtype: 0,
				fwshow: false,
				tabBerLists: [],
				quyu:'',
				mianji:'',
				jiage:'',
				pmzt:'',
				pmfs:'',
				quyulist: [
					'不限',
					'渝中区',
					'江北区',
					'渝北区',
					'九龙坡区',
					'沙坪坝区',
					'南岸区',
					'巴南区',
					'大渡口区',
					'北碚区'
				],
				mjlist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "50m²以下",
						"value": "1-50"
					},
					{
						"label": "50-70m²",
						"value": "50-70"
					},
					{
						"label": "70-90m²",
						"value": "70-90"
					},
					{
						"label": "90-120m²",
						"value": "90-120"
					},
					{
						"label": "120-150m²",
						"value": "120-150"
					},
					{
						"label": "150-200m²",
						"value": "150-200"
					},
					{
						"label": "200-300m²",
						"value": "200-300"
					},
					{
						"label": "300m²以上",
						"value": "300-3000"
					}
				],
				jglist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "50万以下",
						"value": "1-50"
					},
					{
						"label": "50-100万",
						"value": "50-100"
					},
					{
						"label": "100-150万",
						"value": "100-150"
					},
					{
						"label": "150-200万",
						"value": "150-200"
					},
					{
						"label": "200-300万",
						"value": "200-300"
					},
					{
						"label": "300-400万",
						"value": "300-400"
					},
					{
						"label": "400-500万",
						"value": "400-500"
					},
					{
						"label": "500-700万",
						"value": "500-700"
					},
					{
						"label": "700-1000万",
						"value": "700-1000"
					},
					{
						"label": "1000万以上",
						"value": "1000"
					}
				],
				pmfslist: [
					{
						"label": "不限",
						"value": ""
					},
					{
						"label": "一拍",
						"value": "一拍"
					},
					{
						"label": "二拍",
						"value": "二拍"
					},
					{
						"label": "变卖",
						"value": "变卖"
					},
					{
						"label": "其他",
						"value": "其他"
					}
					
				],
				pmztlist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "未起拍",
						"value": "0"
					},
					{
						"label": "竞拍中",
						"value": "1"
					},
					{
						"label": "已结束",
						"value": "2"
					},
				],
				pageNo: 1,
				pageSize: 30
			};
		},
		onLoad() {
			this.tabBerLists = uni.getStorageSync('tabBarList') // 自定义的tabbar赋值
		},
    onShow(){
      let userinfo = uni.getStorageSync('userInfo')
      if (userinfo!=null){
        if (userinfo.userType==2 || userinfo.userType==5){
          this.agentMobile = userinfo.mobile
        }
      }
    },
		methods: {
      onClickItem(e) {
        console.log(e)
        if (this.current !== e.currentIndex) {
          this.current = e.currentIndex
        }
        if (e.currentIndex==0){
          this.housingType = 1;
        }else if (e.currentIndex==1){
          this.housingType = 2;
        }
        housingresourcepage({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          housingType: this.housingType,
          address: this.quyu,
          area: this.mianji,
          marketPrice: this.jiage,
          auctionNumber: this.pmfs,
          auctionState: this.pmzt,
          title: this.title
        }).then(res => {
          this.indexList = res.data.list
          //this.$refs.paging.complete(res.data.list)
        });
      },
			onShareAppMessage() {
        // let userinfo = uni.getStorageSync('userInfo')
        // if (userinfo!=null){
        //   if (userinfo.userType==2 || userinfo.userType==5){
        //     this.agentMobile = userinfo.mobile
        //   }
        // }
				return {
					title: '房源列表',
					success: function(res) {
						// 转发成功  
					},
					fail: function(err) {
						// 转发失败  
					}
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.fwshow = false
				this.gethousingresourcepg();
				// console.log('close');
			},
			clickqy(val) {
					this.quyu = val;
			},
			clickmj(val) {
				this.mianji = val;
			},
			clickjg(val) {
				this.jiage = val;
			},
			clickfs(val) {
					this.pmfs = val;
			},
			clickzt(val) {
				this.pmzt = val;
			},
			fytc(type) {
				this.fwtype = type;
			},
			openfw(type) {
				this.fwshow = true
				this.fwtype = type
			},
			change(e) {
				this.title = e
				this.gethousingresourcepg()
			},
			tofwtail(id) {
				uni.navigateTo({
					url: `/pages/index/fangwuDetail?id=${id}&scene=`+this.agentMobile
				})
			},
			gethousingresourcepg() {

				housingresourcepage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
          housingType: this.housingType,
					address: this.quyu,
					area: this.mianji,
					marketPrice: this.jiage,
					auctionNumber: this.pmfs,
					auctionState: this.pmzt,
					title: this.title

				}).then(res => {
					this.indexList = res.data.list

				})
			},
			tosalesmanDetail() {
				uni.navigateTo({
					url: "/pages/index/salesmanDetail"
				})
			},
			queryList(pageNo, pageSize) {
				housingresourcepage({
					pageNo: pageNo,
					pageSize: pageSize,
          housingType: this.housingType,
					address: this.quyu,
					area: this.mianji,
					marketPrice: this.jiage,
					auctionNumber: this.pmfs,
					auctionState: this.pmzt,
					title: this.title
				}).then(res => {
					this.$refs.paging.complete(res.data.list)
				});
			},
			chonzhi() {
				this.quyu = '';
				this.mianji = '';
				this.jiage = '';
				this.pmzt = '';
				this.pmfs = '';
			this.queryList(1,30)
			},
			//时间戳转换
			getTime(time) {
				let data = new Date(time);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}-${month}-${day} ${h}:${mm}`;
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 24rpx;

		.salesman {
			margin-bottom: 40rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.salesmanMess {
				height: 150rpx;

				.tag {
					.tagList {
						line-height: 30rpx;
						padding: 4rpx 6rpx;
						margin: 0 10rpx;
						background-color: #bccbff;
						color: #5976f7;
					}
				}
			}
		}

	}

	.gengduo {
		padding: 20rpx;

		.sousuo {
			margin-bottom: 20rpx;
		}

		.span {
			display: inline-block;
			width: 156rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 13px;
			background-color: rgb(248, 248, 248);
			color: #666;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.span:hover {
			color: #2979ff;
			background-color: rgb(233, 240, 252);
		}

		.span.on {
			color: #2979ff;
			background-color: rgb(233, 240, 252);
		}

		.span:nth-child(4n) {
			margin-right: 0;
		}
	}

	.gengduo .dt {
		font-size: 16px;
		margin-bottom: 20rpx;
	}

	.jiage {
		display: flex;
		padding: 20rpx 30rpx;
		flex-wrap: wrap;

		.span {
			display: inline-block;
			width: 156rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 13px;
			background-color: rgb(248, 248, 248);
			color: #666;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.span:hover {
			color: #2979ff;
			background-color: rgb(233, 240, 252);
		}
.span.on {
			color: #2979ff;
			background-color: rgb(233, 240, 252);
		}
		.span:nth-child(4n) {
			margin-right: 0;
		}
	}

	.mianji {
		display: flex;
		padding: 20rpx 30rpx;
		flex-wrap: wrap;

		.span {
			display: inline-block;
			width: 156rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 13px;
			background-color: rgb(248, 248, 248);
			color: #666;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.span:hover {
      color: #2979ff;
      background-color: rgb(233, 240, 252);
		}
.span.on {
			color: #2979ff;
			background-color: rgb(233, 240, 252);
		}
		.span:nth-child(4n) {
			margin-right: 0;
		}
	}

	.tablenav {
		display: flex;
		justify-content: space-around;
		margin: 20rpx 0;
		margin-top: 0rpx;
	}

	.u-icon {
		margin-left: 5rpx;
		justify-content: center;
	}

	.bot03 {
		display: flex;
		padding: 20rpx 30rpx;

		.fl {
			width: 100rpx;
			text-align: center;

			.ff1 {
				text-align: center;
			}
		}

		.fr {
			flex: 1;
		}
	}

	.bot03 .fl .ff1 .u-icon {
		justify-content: center !important;
	}

	.qy .item {
		height: 80rpx;
		line-height: 80rpx;
		width: 200rpx;
		border: 2px solid #fff;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.qy .item:hover {
		color: #2979ff;
		border-left: 2px solid #2979ff;;
	}

	.qy .item.on {
		color: #2979ff;
		border-left: 2px solid #2979ff;;
	}

	.tablenav .span {
		color: #2979ff;
		display: flex;
		margin: 0 10rpx;
	}

	.fqlist .ul .li {
		display: flex;

		.jg {
			display: inline-block;
			color: #f74d3c;
			margin-right: 20rpx;
			font-weight: bold;

		}

		.str {
			display: inline-block;
			color: #000;
			font-weight: bold;
		}

		padding: 10rpx 0;
		border-bottom: 1rpx solid #eee;

		.qp_p {
			margin-top: 10rpx;

			.p {
				font-size: 11px;
				color: #2979ff;
				background-color: #f0f2f7;
				border-radius: 20rpx;
				padding: 0 5px;
				display: inline-block;
				margin-right: 10rpx;
			}
		}
	}

	.fqlist .ul .li .tpic {
		width: 260rpx;
		height: 228rpx;
		background-color: #333;
		margin: 0 10rpx;
		margin-right: 15rpx;
		position: relative;

		.title {
			position: absolute;
			width: 100%;
			line-height: 60rpx;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.6);
			color: #fff;
			font-size: 14px;
			z-index: 0;
			bottom: 0;
			left: 0;
		}
	}

	.sousuo {
		margin-bottom: 20rpx;
	}

	.fqlist .ul .li .tpic image {
		width: 100%;
		height: 100%;
	}

	.fqlist .ul .li .text {
		flex: 1;
		margin-right: 10rpx;
	}

	.fqlist .ul .li .text .dt {
		font-size: 15px;

		color: #000;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 10rpx;
	}

	.fqlist .ul .li .text .dt .sb {
		background-color: rgb(247, 77, 60);
		color: #fff;
		font-size: 15px;
		padding: 0 5px;
	}

	.fqlist .ul .li .text .span {
		font-size: 13px;
		margin-top: 10rpx;
		color: #666;
	}

	.fqlist .ul .li .text .mj {
		border: 1px solid #2979ff;
		color: #2979ff;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 10rpx;
		font-size: 12px;
		display: inline-block;
		margin-right: 10rpx;
	}

	.fqlist .ul .li .text .zk {
		border: 1px solid rgb(184, 184, 184);
		color: rgb(184, 184, 184);
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 10rpx;
		font-size: 12px;
		display: inline-block;
	}
</style>